  <style type="text/css">
.attachment-widget .form-group{margin-top: 0;}
.attachment-content{overflow-y: scroll;height:430px;}
.attachment-content .cover {
    width: 120px;
    height:103px;
    position: absolute;
    background-size: cover;
    background: url('__ADMIN_IMG__/choosed.png') no-repeat center center;
    display: none;
    margin-top: -130px;
}
  </style>
  <div class="attachment-widget">
    <!--此页面主体内容-->
    <div class="row ml0 mr0">
      <!---->

         <div class="col-xs-10 col-sm-10 button-list clearfix">  
         
         <form class="form" method="post" action="{:U('index')}">
            <div class="col-md-3">                                                
              <select class="form-control">
              <option value="0">选择类型</option>
                <option value="1">图像</option>
                <option value="2">视频</option>
                <option value="3">文件</option>
              </select>
              </div>
              <div class="col-md-4">
               <input id="date_d" class="form-control form-date" type="text" value="选择日期" name="create_time" readonly>
              </div>

              <div class="col-md-3">
              <select class="form-control">
                <option value="0">选择分类</option>
                <option value="1">图标素材</option>
                <option value="2">人物</option>
                <option value="3">风景</option>
              </select>

              </div>
             <span class="btn btn-info btn-raised btn-sm">筛选</span>

          </form>
         </div>
         <div class="col-xs-2 col-sm-2 pl-0">
            <span class="btn btn-info btn-raised btn-sm">本地上传</span> 
        </div>

    </div>
      
    <div class="row pl-75 mt-20 ml0 mr0">
    <ul class="attachment-content">
       <volist name="attachment_list_data" id="attachment_data">
         <li class="col-sm-6 col-md-3 col-lg-3 mb-10" data-id="{$attachment_data.id}" data-src="{$attachment_data.id|getThumbImageById=###,120,100,0,true}">
            <div class="box-style ud-media-li">
              <div class="tc" style="height:100px;line-height:100px;">     
                  <img src="{$attachment_data.id|getThumbImageById=###,120,100,0,true}" alt="" style="max-width:100%;max-height:100%;">
              </div>
              <div class="ud-gj-mediatit f13">
                 <span class="w75 disline oh nowarp">{$attachment_data.name}</span>
                 <span class="showAttachmentInfo" data-id="{$attachment_data.id}">
                    <a href="" data-toggle="modal" data-target="#attachmentInfoModal">
                    <span class="right color-icon">
                       <i class="iconfont icon-appshusandian f18"></i>
                    </span>
                    </a>
                 </span>
              </div>
            </div>
            <div class="cover cancelSelectImage" data-id="{$attachment_data.id}"></div>
          </li>

      </volist> 
      </ul>    
        <div class="col-md-9 tc"><span class="btn btn-raised btn-link" id="ajax-more-attachment" page-id="1">加载更多</span></div>
        <input type="hidden" id="attachment_ids" value="">
        <input type="hidden" id="attachment_srcs" value="">
        <div class="col-md-3"><span class="btn btn-info btn-raised btn-sm bg-color-orange2" id="attachment-ok" data-dismiss="modal">确认</span>  </div>
  </div>

  <!-- Modal Structure -->
  <div class="modal fade mt80" id="attachmentInfoModal" tabindex="-1" role="dialog" aria-labelledby="attachmentInfoModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">

          <div class="modal-header pt-5">

            <h4 class="modal-title tc color-26 f18">附件详情</h4>
          </div>

          <div class="modal-body pt-5">
             <form action="{:U('editAttachment')}" method="post" class="editAttachment">
             <div class="row">
             <input type="hidden" name="id" id="file-id" value="">
                <div class="row ml-0 mr-0">
                    <div class="col-md-12 oh tc media-modal-pic">                    
                        <a href="__ADMIN_IMG__/sidebar.png" id="file-href" target="_blank">
                          <img src="__ADMIN_IMG__/sidebar.png" id="file-src" alt="">
                        </a>
                    </div>
                    <div class="col-md-12">
                        <ul class="f12 lh22">
                          <li><strong>文&nbsp;&nbsp;件&nbsp;名：</strong><span id="file-name">未知</span></li>
                          <li><strong>文件类型：</strong><span id="file-type">未知</span></li>
                          <li><strong>文件大小：</strong><span id="file-size">未知</span></li>
                          <li><strong>上传时间：</strong><span id="file-uploadtime">未知</span></li>
                          <li><strong>上&nbsp;&nbsp;传&nbsp;者：</strong><span id="file-author">未知</span></li>
                          <li><strong>URL：</strong><span id="file-url">无</span></li>
                        </ul>
                        <a id="delAttachmentUrl" href="{:U('delAttachment')}" class="btn btn-danger btn-raised btn-sm confirm ajax-get">删除</a><span id="url-copy" class="btn btn-success btn-raised btn-sm copyurl">
                        复制URL</span>
                    </div>
                </div>
                      
             </div>

             </form>  
          </div>
        </div>
     </div>
   </div>
</div>

      <link href="__PUBLIC__/lib/datetimepicker/datetimepicker.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="__PUBLIC__/lib/datetimepicker/datetimepicker.min.js"></script>

        <script>
            $('.form-datetime').datetimepicker({
                language: "zh-CN",
                autoclose: true,
                format: 'yyyy-mm-dd hh:ii'
            });
            $('.form-date').datetimepicker({
                language: "zh-CN",
                minView: 2,
                autoclose: true,
                format: 'yyyy-mm-dd'
            });
            $('.form-time').datetimepicker({
                language: "zh-CN",
                minView: 0,
                startView:1,
                autoclose: true,
                format: 'hh:ii'
            });
            $('.time').change(function () {
                var fieldName = $(this).attr('data-field-name');
                var dateString = $(this).val();
                var date = new Date(dateString);
                var timestamp = date.getTime();
                $('[name=' + fieldName + ']').val(Math.floor(timestamp / 1000));
            });
     //选择当前图片
    function cancelSelectImage(obj,img_id){
        obj.style.display="none";
      }
     /*弹窗*/
    
    $(function () { 
        $(".showAttachmentInfo").click(function () {
            var $this = $(this);
            var attachmentId=$this.attr('data-id');
            $.post("{:U('Admin/Attachment/attachmentInfo')}", {id:attachmentId}, function (res) {
                  $("#file-name").text(res.name);
                  $("#file-type").text(res.type);
                  $("#file-size").text(res.size);
                  $("#file-uploadtime").text(res.uploadtime);
                  $("#file-author").text(res.author);
                  $("#file-url").text(res.url);

                  $("#file-src").attr('src',res.url).attr('alt',res.alt);
                  $("#file-href").attr('href',res.url);
                  $("#file-alt").val(res.alt);
                  $("#file-id").val(res.id);
                  var newDelUrl=$("#delAttachmentUrl").attr('href').replace(".html","/id/"+res.id+".html");
                  $("#delAttachmentUrl").attr('href',newDelUrl);
              })
          })
        //选中当前图片
        $(".attachment-content li").click(function () {
          var $this = $(this);
          var id=$this.attr('data-id');
          var src=$this.attr('data-src');
          $(".attachment-content").find('div.cover').hide();

          $("#attachment_ids").val(id);
          $("#attachment_srcs").val(src);
          $this.find('div.cover').show();
        })
        //图片选择器确认按钮
        $("#attachment-ok").click(function () {
              var $this = $(this);
              var ids=$("#attachment_ids").val();
              var srcs=$("#attachment_srcs").val();
              //插入数据
              $("[name='{$field.name}']").val(ids);
                        $("[name='{$field.name}']").parent().find('.popup-gallery').html(
                                ' <div class="each"><a href="'+ srcs+'" title="点击查看大图片"><img src="'+ srcs+'"></a><div class="text-center opacity del_btn" ></div>' +
                                        '<div onclick="admin_image.removeImage($(this),'+ids+')"  class="text-center del_btn">删除</div></div>'
                        );
          })
        //加载更多媒体文件
        $("#ajax-more-attachment").click(function () {
              var $this = $(this);
              var paged=$this.attr('page-id');
              $.post("{:U('Common/Attachment/attachmentInfo')}", {paged:paged}, function (res) {
                //页数加1
                  $this.attr('page-id',parseInt(paged)+1);
                })
           })
      })
  </script>